<template>
  <div class="app-container bg-white" v-loading="loading">
    <div>
        <h5><span class="font-size--xs">申请分享客条件</span></h5>
        <div class="content text-darkgray flex">
            <div>分佣比率：</div>
            <div v-if="settingData">
                <el-radio-group v-model="settingData.isApply">
                    <el-radio :label="0">自动成为(自动成为，不需要后台审核，但是需要设置等级条件)</el-radio>
                    <el-radio :label="1">客户申请</el-radio>
                </el-radio-group>
            </div>
        </div>
    </div>

    <div>
        <h5><span class="font-size--xs">等级配置&emsp;&emsp;</span><span class="font-size--md font-weight--sm text-lightgray">​以下项1天内修改仅可生效1次（当日24点前多次修改，以最后一次修改为准，次日凌晨4点后生效）</span></h5>
        <div class="content text-darkgray relative">
            <el-popover placement="top" width="295" trigger="hover" content="至少需勾选一项，最少满足其中一项条件就可以升级">
                <i slot="reference" class="el-icon-question text-brand pointer absolute my_icon"></i>
            </el-popover>
            <div class="flex align-center">
              <div>等级条件：</div>
              <el-checkbox-group v-model="grade" >
                  <el-checkbox label="lcInviteNum" name="type">总邀请人数</el-checkbox>
                  <el-checkbox label="lcConsumeNum" name="type">总消费次数</el-checkbox>
                  <el-checkbox label="lcConsumeMoney" name="type">总消费金额</el-checkbox>
              </el-checkbox-group>
            </div>
            <br>
            <el-table :data="tableData" border stripe :header-cell-style="tableHeaderStyle">
                <el-table-column prop="levelName" label="等级名称">
                  <template slot-scope="scope">
                    <el-input placeholder="请输入等级名称" v-model.trim="scope.row.levelName" maxlength="6" show-word-limit></el-input>
                  </template>
                </el-table-column>
                <el-table-column v-if="grade.includes('lcInviteNum')" prop="bindSubordinateNum" label="总邀请人数">
                  <template slot-scope="scope">
                    <el-input-number controls-position="right" v-model.trim="scope.row.bindSubordinateNum" placeholder="大于0的正整数" :precision="0" :step="1" :min="0" :max="9999"></el-input-number>
                  </template>
                </el-table-column>
                <el-table-column v-if="grade.includes('lcConsumeNum')" prop="completedOrderNum" label="总消费次数">
                  <template slot-scope="scope">
                    <el-input-number controls-position="right" v-model.trim="scope.row.completedOrderNum" placeholder="大于0的正整数" :precision="0" :step="1" :min="0" :max="9999"></el-input-number>
                  </template>
                </el-table-column>
                <el-table-column v-if="grade.includes('lcConsumeMoney')" prop="completedOrderMoney" label="总消费金额">
                  <template slot-scope="scope">
                    <el-input-number controls-position="right" v-model.trim="scope.row.completedOrderMoney" placeholder="大于0的正整数" :precision="0" :step="1" :min="0" :max="99999999"></el-input-number>
                  </template>
                </el-table-column>
                <el-table-column>
                  <template slot="header">
                    <span>默认奖励（%）</span>
                    <el-popover placement="top" width="295" trigger="hover" content="分享比例累计不超过30%">
                        <i slot="reference" class="el-icon-question text-brand pointer"></i>
                    </el-popover>
                  </template>
                  <template slot-scope="scope">
                      <div class="flex align-center flex-start">
                        <span class="margin_right_10">分享客</span>
                        <el-input-number controls-position="right" v-model.trim="scope.row.shareCustomerRatio" placeholder="请输入分享客默认奖励" :precision="1" :step="0.1" :min="0" :max="100"></el-input-number>
                      </div>
                      <div class="flex align-center flex-start margin_top_10">
                        <span class="margin_right_10">邀请人</span>
                        <el-input-number controls-position="right" v-model.trim="scope.row.inviterRatio" placeholder="请输入邀请人默认奖励" :precision="1" :step="0.1" :min="0" :max="100"></el-input-number>
                      </div>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="100">
                  <template slot-scope="scope">
                      <el-button size="small" v-if="scope.$index !=0" type="danger" @click="deleteOption(scope.$index)">删除</el-button>
                  </template>
                </el-table-column>
            </el-table>
            <br>
            <el-button type="primary" @click="addOption()">添加等级</el-button>
        </div>
    </div>

    <div class="page-footer"></div>

    <div class="footer bg-white flex flex-center align-center">
        <el-button>取消</el-button>
        <el-button type="primary" @click="onSubmit()">保存</el-button>
    </div>
  </div>
</template>
<script>
  import Setting from '@/settings';
  import { GetSharedSettings, SaveSharedSettings } from '@/views/shared-management/services/index';
  export default {
    data() {
      return {
        grade: [],
        tableData: [],
        loading: false,
        settingData: null,
        tableHeaderStyle: Setting.tableHeaderStyle
      }
    },
    methods: {
      onSubmit() {
        if (!this.grade || !this.grade.length) {
          this.$message.warning('必修选择一项等级条件');
          return;
        }
        const settingData = JSON.parse(JSON.stringify(this.settingData));
        settingData.lcInviteNum = this.grade.includes('lcInviteNum') ? 1 : 0;
        settingData.lcConsumeNum = this.grade.includes('lcConsumeNum') ? 1 : 0;
        settingData.lcConsumeMoney = this.grade.includes('lcConsumeMoney') ? 1 : 0;
        settingData.levelList = this.tableData;

        settingData.creatorId = JSON.parse(this.$store.getters.userInfo).id ? JSON.parse(this.$store.getters.userInfo).id : '1';
        SaveSharedSettings(settingData)
        .then(data => {
          if(data.code  == 200){
            this.$message.success('保存成功');
            this.getDefaultSetting();
          }
        })
      },
      addOption(){
        this.tableData.push({
          levelName: '',
          level: this.tableData.length + 1,
          bindSubordinateNum: '',
          completedOrderNum: '',
          completedOrderMoney: '',
          shareCustomerRatio: '',
          inviterRatio: ''
        })
      },
      deleteOption(index) {
        this.tableData.splice(index, 1);
      },
      getDefaultSetting() {
        this.loading = true;
        GetSharedSettings()
        .then(data => {
          if (data.code == 200) {
            this.settingData = data.data;
            this.tableData = data.data.levelList;
            if (data.data.lcInviteNum == 1) {
              this.grade.push('lcInviteNum');
            } if (data.data.lcConsumeNum == 1) {
              this.grade.push('lcConsumeNum');
            } if (data.data.lcConsumeMoney == 1) {
              this.grade.push('lcConsumeMoney');
            }
          } else {
            this.$message.error('默认设置获取失败!');
          }
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        })
      }
    },
    created() {
      this.getDefaultSetting();
    }
  }
</script>
<style scoped lang="scss">
.content {
    padding-left: 50px;
}

.my_icon {
    top: 3px;
    left: 30px;
}

.footer {
    width: 100%;
    height: 85px;
    line-height: 85px;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 110;
    box-shadow: 0px -6px 10px 0px rgba(0,0,0,0.03);
}

::v-deep .el-input-number .el-input__inner {
    text-align: left;
}
</style>
